<template>
  <div class="c-width c-flex c-dis-flex-row c-hidden elevator_view_wrap">
    <div class="c-height c-dis-flex-col c-hidden com_left_width">
      <div class="c-width c-dis-flex-row c-hidden" style="height:40%;">
        <div class="com_box_wrap  total-box">
          <div class="com_box_title">
            <p>进站车辆</p>
          </div>
          <div class="com_box_cont c-flex c-hidden c-dis-flex-col" style="align-items: center;justify-content: center;">
            <div class="device_total">
              <div class="on_line">
                <p><span class="text_color1">{{ deviceData.onLine }}</span>辆</p>
                <p>外部车辆</p>
              </div>
              <div class="on_line off_line">
                <p><span class="text_color2">{{ deviceData.offLine }}</span>辆</p>
                <p>内部车辆</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="com_box_wrap  c-flex com-margin-top">
        <div class="com_box_title">
          <p>近30天车辆统计</p>
        </div>
        <div class="com_box_cont">
          <BarChart :chart-data="chartData1"></BarChart>
        </div>
      </div>
    </div>
    <div class="c-flex c-height c-dis-flex-col c-hidden com-margin-left com-margin-right">
      <div class="com_box_wrap">
        <div class="com_box_title">
          <p>进站车辆</p>
        </div>
        <div class="com_box_cont c-flex c-hidden c-dis-flex-col" style="padding: 0">
          <div class="search_form_box">
            <el-form ref="form" :model="form" size="small">
              <el-form-item label="车牌号">
                <el-input v-model="form.data1" placeholder="请输入车牌号"></el-input>
              </el-form-item>
              <el-form-item label="负责人">
                <el-input v-model="form.data2" placeholder="请输入负责人"></el-input>
              </el-form-item>
              <el-form-item label="单位">
                <el-input v-model="form.data3" placeholder="请输入单位"></el-input>
              </el-form-item>
              <el-form-item label="车辆类别">
                <el-select v-model="form.region" placeholder="请选择车辆类别">
                  <el-option label="内部车" value="value1"></el-option>
                  <el-option label="临时车" value="value2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="btns com-margin-left">
                <el-button type="primary">搜索</el-button>
                <el-button>重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="table_list_1 c-flex c-dis-flex-col c-hidden">
            <el-table class="big_data_table" :data="tableData" height="100%" style="width: 100%">
              <el-table-column type="index" label="序号" min-width="40px" align="center"> </el-table-column>
              <el-table-column prop="data1" label="车牌号" min-width="80" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="data2" label="负责人" min-width="80" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="data3" label="单位" min-width="100" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="dat4" label="车辆类别" min-width="60" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="date" label="进站时间" min-width="80" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="date" label="出站时间" min-width="80" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="data5" label="累计时长(h)" min-width="60" :show-overflow-tooltip="true"> </el-table-column>
            </el-table>
          </div>

        </div>
        <div class="pagination_box">
          <el-pagination size="small" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                         :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="40">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { randomNum } from "@/utils/index.js";
import BarChart from "@/components/Chart/BarChart";
export default {
  components: {
    BarChart,
  },
  data() {
    return {
      deviceData: {
        onLine: randomNum(1, 50),
        offLine: randomNum(1, 10),
      },
      chartData1: {
        unit: '数量',
        color: ['rgba(53,210,255, 1)', 'rgba(255, 181, 36,1)'],
        colorBg: [
          ['rgba(53,210,255, 1)', 'rgba(53,210,255, 0.4)'],
          ['rgba(255, 181, 36,1)', 'rgba(255, 181, 36,0.4)'],
        ],
        legend: ['进站', '出站'],
        xAxis: ['10-01', '10-02', '10-03', '10-04', '10-05', '10-06', '10-07'],
        series: [
          [randomNum(100, 200), randomNum(100, 200), randomNum(100, 200), randomNum(100, 200), randomNum(100, 200), randomNum(100, 200), randomNum(100, 200)],
          [randomNum(10, 90), randomNum(20, 90), randomNum(30, 90), randomNum(30, 90), randomNum(20, 90), randomNum(30, 90), randomNum(30, 90)],
        ]
      },
      warnTotal: { data1: 0, data2: 37 },
      tableData: [
        { data1: '川B6XS52', data2: '---', data3: '---', data4: '临时车', data5: 0, date: '2022-10-28 15:04:36' },
        { data1: '川B6XS52', data2: '---', data3: '---', data4: '临时车', data5: 0, date: '2022-10-28 15:04:36' },
        { data1: '川B6XS52', data2: '---', data3: '---', data4: '临时车', data5: 0, date: '2022-10-28 15:04:36' },
        { data1: '川B6XS52', data2: '---', data3: '---', data4: '临时车', data5: 0, date: '2022-10-28 15:04:36' },
        { data1: '川B6XS52', data2: '---', data3: '---', data4: '临时车', data5: 0, date: '2022-10-28 15:04:36' },
        { data1: '川B6XS52', data2: '---', data3: '---', data4: '临时车', data5: 0, date: '2022-10-28 15:04:36' },
        { data1: '川B6XS52', data2: '---', data3: '---', data4: '临时车', data5: 0, date: '2022-10-28 15:04:36' },
        { data1: '川B6XS52', data2: '---', data3: '---', data4: '临时车', data5: 0, date: '2022-10-28 15:04:36' },
        { data1: '川B6XS52', data2: '---', data3: '---', data4: '临时车', data5: 0, date: '2022-10-28 15:04:36' },
        { data1: '川B6XS52', data2: '---', data3: '---', data4: '临时车', data5: 0, date: '2022-10-28 15:04:36' },
        { data1: '川B6XS52', data2: '---', data3: '---', data4: '临时车', data5: 0, date: '2022-10-28 15:04:36' },
        { data1: '川B6XS52', data2: '---', data3: '---', data4: '临时车', data5: 0, date: '2022-10-28 15:04:36' },
        { data1: '川B6XS52', data2: '---', data3: '---', data4: '临时车', data5: 0, date: '2022-10-28 15:04:36' },
      ],
      currentPage: 1,
      form:{}
    };
  },
  methods: {
    //获取图片地址
    getImgUrl(img) {
      return require("@/assets/images/" + img);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
};
</script>

<style lang="scss" scoped>
.total-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.com_left_width {
  width: 28%;
  min-width: 240px;
}

.com_right_width {
  width: 18.75vw;
}

.box_height {
  flex: none;
  height: 12.5vw;
  min-height: 200px;
}
</style>

